import React, { Component } from 'react'
// 每一个任务组件
import './todo.css'
class Todo extends Component {
  constructor(props) {
    super(props)
  }
  del = (id) => {
    console.log(id)
    // 子传父去删除
    this.props.toDel(id)
  }
  changeList = (id) => { //切换状态的子传父
    this.props.toChange(id)
  }
  render () {
    let { todoItem } = this.props;
    return (
      <div className="todo">
        <input onChange={() => this.changeList(todoItem.id)} type="checkbox" defaultChecked={todoItem.ischeck} />---
        <span className={todoItem.ischeck ? 'done' : ''}>{todoItem.text}</span>----
        <button onClick={() => this.del(todoItem.id)
        }> 删除</button>
      </div >
    )
  }
}
export default Todo